<template>
	<view class="collect">
		<u-navbar bgColor="#fff">
			<view slot="left" class="align-center">
				<image @click="$tools.back()" src="@/static/login/back3.png" style="width: 36rpx; height: 36rpx"></image>
			</view>
			<view slot="center">
				<view style="font-weight: 600; font-size: 36rpx; color: #333333">收藏</view>
			</view>
		</u-navbar>
		<view class="flex-around" style="padding: 36rpx 0">
			<view
				class="text2"
				:class="{ text1: type == 1 }"
				@click="
					type = 1;
					init();
				"
			>
				岗位
			</view>
			<view
				class="text2"
				:class="{ text1: type == 2 }"
				@click="
					type = 2;
					init();
				"
			>
				住宿
			</view>
		</view>
		<view v-if="type == 1" style="padding: 20rpx 32rpx; background-color: #f5f6fa; min-height: 100vh">
			<view class="card" @click="godetail(item)" v-for="(item, index) in list" :key="index" style="margin-bottom: 20rpx">
				<view class="flex-between1" style="margin-bottom: 12rpx">
					<view style="font-weight: 600; font-size: 32rpx; color: #333333">{{ item.companyPostModelDto.jobName }}</view>
					<view class="">
						<text style="font-weight: Bold; font-size: 32rpx; color: #fe4343">{{ item.companyPostModelDto.salaryStart }}-{{ item.companyPostModelDto.salaryEnd }}</text>
						<text style="font-weight: 400; font-size: 24rpx; color: #fe4343">元/月</text>
					</view>
				</view>
				<view style="font-weight: 400; font-size: 28rpx; color: #333333; margin-bottom: 20rpx">
					<text>{{ item.companyPostModelDto.jobTime }}</text>
					<text v-if="item.companyPostModelDto.jobType == 1">长期</text>
					<text v-if="item.companyPostModelDto.jobType == 2">临时</text>
					<text v-if="item.companyPostModelDto.jobType == 3">小时</text>
					<text v-if="item.companyPostModelDto.jobType == 4">计件</text>
					<text v-if="item.companyPostModelDto.jobType == 5">其他</text>
				</view>
				<view class="flex">
					<view style="padding: 8rpx 20rpx; background: #f8f8f8; font-weight: 400; font-size: 24rpx; color: #666666; margin-right: 20rpx">
						{{ item.companyPostModelDto.label }}
					</view>
				</view>
				<view class="flex-between1 align-end">
					<view style="font-weight: 400; font-size: 24rpx; color: #999999">{{ item.companyPostModelDto.address }}</view>
					<view
						@click="
							collect(item.companyPostModelDto.id, 1);
							init();
						"
						class="flex-center1"
						style="width: 192rpx; height: 64rpx; background: #1365f9; border-radius: 32rpx; font-size: 28rpx; color: #ffffff"
					>
						取消收藏
					</view>
				</view>
			</view>
		</view>

		<view v-if="type == 2" style="padding: 20rpx 32rpx; background-color: #f5f6fa; min-height: 100vh">
			<view class="card" @click="godetail(item)" v-for="(item, index) in list" :key="index" style="margin-bottom: 20rpx">
				<view style="margin-bottom: 12rpx">
					<view style="font-weight: 600; font-size: 32rpx; color: #333333">{{ item.roomModelDto.name }}</view>
				</view>
				<!-- <view style="font-weight: 400; font-size: 28rpx; color: #333333; margin-bottom: 20rpx">入住时间：{{item.roomModelDto.name}}</view> -->

				<view class="flex-between1 align-end">
					<view style="font-weight: 400; font-size: 24rpx; color: #999999">{{ item.roomModelDto.homeName }}</view>
					<view
						@click="
							collect(item.roomModelDto.id, 2);
							init();
						"
						class="flex-center1"
						style="width: 192rpx; height: 64rpx; background: #1365f9; border-radius: 32rpx; font-size: 28rpx; color: #ffffff"
					>
						取消收藏
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			type: 1,
			list: []
		};
	},
	onShow() {
		this.init();
	},
	methods: {
		init() {
			this.$request('front/collection/list', {
				type: this.type
			}).then((res) => {
				console.log(res, '列表');
				this.list = res.obj;
			});
		},
		godetail(item) {
			console.log(this.type, 'this.type');
			if (this.type == 1) {
				this.$tools.navigite('/pages/index/detail', item.itemId);
			}
			if (this.type == 2) {
				this.$tools.navigite('/pages/putup/detail', item.roomModelDto.homeId);
			}
		}
	}
};
</script>

<style lang="less" scoped>
.collect {
	padding-top: 180rpx;
	.text2 {
		font-weight: 400;
		font-size: 32rpx;
		color: #999999;
	}
	.text1 {
		font-weight: 600;
		font-size: 32rpx;
		color: #1365f9;
	}
	.card {
		padding: 34rpx 40rpx;
		background: #ffffff;
	}
}
</style>
